<template>
  <div class="login">
    <div class="container">
      <div class="item left-item">
        <div class="app-logo enter-x">
          <img src="../../assets/img/logo.png" alt="" />
          <div class="logo-title">Template Admin</div>
        </div>
        <div class="my-auto">
          <img
            src="../../assets/svg/login-left-box.svg"
            class="enter-x"
            alt=""
          />
          <div class="name enter-x">开箱即用的中后台管理系统</div>
          <div class="info enter-x">输入您的个人详细信息开始使用！</div>
        </div>
      </div>
      <div class="item right-item flex-align">
        <login-form />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import LoginForm from "/@/views/login/components/LoginForm.vue";
</script>
<style lang="less" scoped>
.login {
  height: 100%;
  position: relative;
  &::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -48%;
    background-image: url("../../assets/svg/login.svg");
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: auto 100%;
  }
  .container {
    position: relative;
    margin: 0 auto;
    height: 100%;
    display: flex;
    @media (max-width: 1600px) and (min-width: 1200px) {
      width: 1200px;
    }
    @media (min-width: 1600px) {
      width: 1600px;
      padding-left: 100px;
    }
    .item {
      flex: 1;
    }
    .left-item {
      display: flex;
      position: relative;
      transition: 2s all linear;
      animation-delay: 0.4s;
      .app-logo {
        position: absolute;
        top: 60px;
        display: flex;
        align-items: center;
        img {
          width: 48px;
          height: 48px;
        }
        .logo-title {
          color: #fff;
          font-size: 24px;
          font-weight: bold;
          margin-left: 5px;
        }
      }
      .my-auto {
        width: 100%;
        margin-top: auto;
        margin-bottom: auto;
        img {
          width: 50%;
          margin-bottom: 10px;
        }
        .name {
          color: #fff;
          font-size: 32px;
          margin-top: 16px;
        }
        .info {
          color: #fff;
          margin-top: 16px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
